import * as turf from '@turf/turf'
import mapboxgl from 'mapbox-gl'

export class MeasureTool {
  constructor(map, mapDraw) {
    this.map = map
    this.Draw = mapDraw
    this.featureId = null
    this.markerElement = this.createMarkerElement()
    
    // 绑定事件
    this.bindEvents()
  }

  // 创建标记元素
  createMarkerElement() {
    const markerElement = document.createElement('div')
    markerElement.className = 'marker'
    markerElement.style.backgroundColor = 'transparent'
    markerElement.style.width = '100px'
    markerElement.style.height = '30px'
    markerElement.style.display = 'flex'
    markerElement.style.alignItems = 'center'
    markerElement.style.justifyContent = 'center'
    return markerElement
  }

  // 绑定绘制事件
  bindEvents() {
    this.map.on('draw.create', (e) => this.updateDraw(e))
    this.map.on('draw.delete', (e) => this.updateDraw(e))
    this.map.on('draw.update', (e) => this.updateDraw(e))
    this.map.on('draw.modechange', () => this.holdMode())
    this.map.on('draw.selectionchange', () => this.holdMode())
  }

  // 更新绘制
  updateDraw() {
    let data = this.Draw.getAll()
    let currentMode = this.Draw.getMode()

    if (currentMode === 'draw_polygon') {
      this.measureArea(data)
    } else if (currentMode === 'draw_line_string') {
      this.measureDistance(data)
    }
  }

  // 测量面积
  measureArea(data) {
    if (data.features.length > 0) {
      this.featureId = data.features[0].id
      let coordinates = data.features[data.features.length - 1].geometry.coordinates
      let polygon = turf.polygon(coordinates)
      let center = turf.centerOfMass(polygon)
      let area = turf.area(polygon)
      let area1 = Math.round(area * 100) / 100
      
      this.markerElement.innerHTML = `<span style="color: black; font-size: 14px;">
        ${area1 > 10000 ? (area1 / 10000).toFixed(2) + ' km²' : area1 + ' m²'}</span>`
      
      new mapboxgl.Marker(this.markerElement)
        .setLngLat(center.geometry.coordinates)
        .addTo(this.map)
    }
  }

  // 测量距离
  measureDistance(data) {
    if (data.features.length > 0) {
      this.featureId = data.features[0].id
      let coordinates = data.features[data.features.length - 1].geometry.coordinates
      let center = coordinates[coordinates.length - 1]
      let length = 0

      for (let i = 0; i < coordinates.length - 1; i++) {
        let from = turf.point(coordinates[i])
        let to = turf.point(coordinates[i + 1])
        let options = { units: 'kilometers' }
        let distance = turf.distance(from, to, options)
        length += distance
      }

      let length1 = length >= 1 
        ? `${Math.round(length * 100) / 100} km` 
        : `${Math.round(length * 1000 * 100) / 100} m`

      this.markerElement.innerHTML = `<span style="color: black; font-size: 14px;">${length1}</span>`
      new mapboxgl.Marker(this.markerElement)
        .setLngLat(center)
        .addTo(this.map)
    }
  }

  // 保持模式
  holdMode() {
    this.Draw.changeMode('simple_select', { featureId: this.featureId })
  }

  // 开始测量
  startMeasure(type) {
    this.deleteAll()
    if (type === 'xian') {
      this.Draw.changeMode('draw_line_string', {})
    } else if (type === 'mian') {
      this.Draw.changeMode('draw_polygon', {})
    }
  }

  // 删除所有
  deleteAll() {
    this.Draw.deleteAll()
    this.featureId = null
    // 删除标记
    this.markerElement.remove()
  }
} 